import { animate, query, stagger, style, transition, trigger } from "@angular/animations";
import { Component, OnInit } from "@angular/core";
import * as HEROES from "./statc_data/heros.json"
import { CommonModule } from "@angular/common";

/**
 * 这个例子中的代码包含下列任务：

当用户首次打开或导航到此页面时，跳过所有动画（该动画会压扁已经存在的内容，因此它只会作用于那些已经存在于 DOM 中的元素）
根据搜索框中的值过滤英雄
对于每次匹配：

通过将元素的不透明度和宽度设置为 0 来隐藏正在离开 DOM 的元素

对正在进入 DOM 的元素，播放一个 300 毫秒的动画。在动画期间，该元素采用其默认宽度和不透明度。

如果有多个匹配的元素正在进入或离开 DOM，则从页面顶部的元素开始对每个元素进行交错（stagger），每个元素之间的延迟为 50 毫秒
 *
 */

@Component({
  standalone: true,
  selector: "hero-list-page-component",
  templateUrl: "./hero-list-page.component.html",
  imports: [CommonModule],
  animations:[
    trigger('filterAnimation',[
      transition(":enter,* => 0, * => -1", []),
      transition(":increment",[
        query(":enter",[
          style({opacity:0,width:0}),
          stagger(50,[
            animate("300ms ease-out",style({opacity:1,width:'*'})),
          ]),
        ],{optional:true})  // {optional:true}) 允许query(":enter"无法选中元素
      ]),
      transition(":decrement",[
        query(":leave",[
          stagger(50,[
            animate("300ms ease-out",style({opacity:0,width:0})),
          ])
        ])
      ])
    ])
  ]
})

export class HeroListPagComponent implements OnInit {
  heroesTotal=-1;
  private _heroes:Array<Hero>=[];
  get heroes(){return this._heroes;}
  ngOnInit(): void {
    this._heroes=HEROES.heroes;
  }

  updateCriteria(criteria:string){
    criteria=criteria?criteria.trim():"";
    this._heroes = HEROES.heroes.filter(hero => hero.name.toLowerCase().includes(criteria.toLowerCase())||hero.description.toLowerCase().includes(criteria.toLowerCase()));
    const newTotal = this.heroes.length;

    if(this.heroesTotal!==newTotal){
      this.heroesTotal=newTotal;
    }
    else if(!criteria){
      this.heroesTotal=-1;
    }
  }

  trackById(index: number, item: Hero): number {
    return item.id;
  }
}

interface Hero{
  "id": number;
  "name":string;
  "role":string;
  "level":  number;
  "health":  number;
  "mana":  number;
  "attack":  number;
  "defense": number;
  "abilities": string[];
  "description": string;
}
